<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>电影网页的推荐</title>
		<link rel="stylesheet" type="text/css" href="css/swiper-4.2.6.min.css" />
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			body{
				background-color: #eee;
			}
			
			ul,
			ol {
				list-style-type: none;
			}
			a{
				text-decoration: none;
			}
			img{
				vertical-align: top;
			}
			
			#header {
				/*	height: 40px;*/
				background-color: #333;
				overflow: hidden;
				color: #fff;
			}
			
			#header>p {
				float: left;
			}
			#header a {
				color: #fff;
			}
			
			#header>ul {
				float: right;
				margin-right: 20px;
			}
			
			#header>ul>* {
				float: left;
				margin-left: 20px;
			}
			
			.erji {
				display: none;
			}
			
			.in:hover .erji {
				display: block;
			}
			
			.dy_list {
				margin: 10px 20px;
			}
			
			.dy_list>h2 {
				
			}
			.lubo{
				height: 437px;
				margin-bottom: 21px;
			}
			.zhanshi{
				width: 80%;
				margin: auto;
				overflow: hidden;
				margin-bottom: 20px;
			}
			.zhanshi>*{
				float: left;
				border: 1px solid #666;
				border-radius: 15px;
			}
			.left{
				width: 45%;
				margin-right: 20px;
			}
			.right{
				width: 45%;
			}
			.zhanshi img{
				width: 100%;
				border-radius: 15px;
			}
			.content{
				padding: 10px 20px;
				margin: auto;
				background-color: #fff;
			}
			ul.cont {
				color: blueviolet;
				font-size: 15px;
				text-align: center;
				overflow: hidden;
			}
			
			ul.cont>li {
				margin: 30px 10px;
				width: 22%;
				height: 250px;
				float: left;
				background-color: #fff;
				border: 1px solid #999;
				
			}
			
			ul.cont>li>img {
				width: 100%;
				height: 80%;
			}
		</style>
	</head>

	<body onload="dataloda()">
		<div id="header">
			<p><span>大梁电影欢迎你！</span>
				<a href="#">登录</a>
				<a href="#">免费注册</a>
			</p>
			<ul>
				<li>每日签到</li>
				<li>我的订单</li>
				<li class="in">
					个人中心
					<ul class="erji">
						<li>播放记录</li>
						<li>收藏记录</li>
					</ul>
				</li>
				<li class="in">
					客服服务
					<ul class="erji">
						<li>客服中心</li>
						<li>联系客服</li>
					</ul>
				</li>
			</ul>
		</div>		
		<div class="lubo">
			<div class="swiper-container">
				<div class="swiper-wrapper" style="height: 437px;">
					<div class="swiper-slide" style="height: 437px;">
						<img data-src="img/pic_0.jpg" class="swiper-lazy" width="100%">
						<div class="swiper-lazy-preloader"></div>
					</div>
					<div class="swiper-slide">
						<img data-src="img/pic_1.jpg" class="swiper-lazy" width="100%">
						<div class="swiper-lazy-preloader"></div>
					</div>
					<div class="swiper-slide">
						<img data-src="img/pic_2.jpg" class="swiper-lazy" width="100%">
						<div class="swiper-lazy-preloader"></div>
					</div>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>

				<!-- 如果需要导航按钮 -->
				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>
			</div>
		</div>
		<div class="zhanshi">
			<div class="left">
				<img src="img/pic_3.jpg"/>
			</div>
			<div class="right">
				<img src="img/pic_4.jpg"/>
			</div>
		</div>
		<div class="content">
			<div class="dy_list">
				<h2>top250 <a href="more-movie.html?title=top250">更多</a></h2>
				<ul id="ul1" class="cont"></ul>
			</div>
			<div class="dy_list">
				<h2>即将上映 <a href="more-movie.html?title=jijiang">更多</a></h2>
				<ul id="ul2" class="cont">

				</ul>
			</div>
			<div class="dy_list">
				<h2>正在上映 <a href="more-movie.html?title=zhengzai">更多</a></h2>
				<ul id="ul3" class="cont">

				</ul>
			</div>
		</div>

		<div class="footer">
           <ul id="ul4">
           	
           </ul>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="js/swiper-4.2.6.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//关于swiper的导航的画面
		var mySwiper = new Swiper('.swiper-container', {
			direction: 'horizontal',
			loop: true,
			autoplay:true,
			lazy: {
				loadPrevNext: true,
			},

			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
			},

			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			}
		})
		var dobanurl = "https://api.douban.com";

		function dataloda() {
			var Top250 = dobanurl + "/v2/movie/top250"+"?apikey=0b2bdeda43b5688921839c8ecb20399b&city=%E5%8C%97%E4%BA%AC&start=0&count=4";
			var Jjsy = dobanurl + "/v2/movie/coming_soon"+"?pikey=0b2bdeda43b5688921839c8ecb20399b&city=%E5%8C%97%E4%BA%AC&start=0&count=4";
			var Zzsy = dobanurl + "/v2/movie/in_theaters"+"?pikey=0b2bdeda43b5688921839c8ecb20399b&city=%E5%8C%97%E4%BA%AC&start=0&count=4";
			this.Getmovie_data(Top250, 0);
			this.Getmovie_data(Jjsy, 1);
			this.Getmovie_data(Zzsy, 2);
		}

		function Getmovie_data(url, type) {
			$.ajax({
				url: url,
				type: "get",
				dataType: "jsonp",
				success: function(data) {
					console.log(data);
					var data_list = data.subjects;
					console.log(data_list);
					for(idex in data_list) {
						var mov = [];
						var movies = data_list[idex];
						var title = movies.title;
						if(title.length >= 6) {
							title = title.substring(0, 6) + "...";
						}
						moe = {
							title: title,
							year: movies.year,
							images: movies.images.small,
							id: movies.id

						}
						mov.push(moe);
						console.log(mov);
						var html = "<li>" + '<img src="' + moe.images + '"/>'+ "<p><a href='list.html?id=" + moe.id + "'>" + moe.title + "</a></p>" +"</li>";
						if(type == 0) {
							$("#ul1").append(html);
						} else if(type == 1) {
							$("#ul2").append(html);
						} else if(type == 2) {
							$("#ul3").append(html);
						}

					}

				}

			})
		}
		creatStars(4)
		function creatStars(n){
			for(var i=1 ; i<=5;i++){
				var Image = document.createElement("img");
				if(i<=n){
					Image.src="img/pic_4.jpg"
					
				}else{
					Image.src="img/pic_5.jpg"
				}
				$("#ul4").append(Image)
			}
			
			
		}
		
	</script>

</html>